<template>
    <view :style="{ '--color': color }">
        <!-- # ifndef H5 -->
        <view :class="{ 'status-bar-box': statusHeight }" :style="{ height: System.statusBarHeight + navHeight + 'px' }">
            <view class="fixed1 flex-box" :class="hideBg ? 'transparent' : 'bgwhite'" :style="{ height: System.statusBarHeight + navHeight + 'px' }">
                <view class="status_bar" :style="{ height: iStatusBarHeight + 'px' }"></view>
                <view class="title flex-box flex" :class="txtColor ? 'white' : 'black'">
                    <!-- 首页 -->
                    <template v-if="isHome == 1 && city">
                        <view class="home-status flex-box align-center">
                            <view class="flex-box align-center" @click="toUrl('/pages/classify/citySelect')">
                                <view class="city lines">{{ city }}</view>
                                <text class="iconfont icon-xiangxia"></text>
                            </view>
                            <navigator url="/pages/classify/search" hover-class="none" class="search-home flex-box align-center flex">
                                <text class="iconfont icon-btn_search"></text>
                                <swiper circular="true" :vertical="true" :autoplay="true" :interval="3000" :duration="1000" v-if="startUp.systemQuery && startUp.systemQuery.length > 0">
                                    <swiper-item class="flex-box align-center" v-for="(sear, j) in startUp.systemQuery" :key="j">
                                        <text>{{ sear.title }}</text>
                                    </swiper-item>
                                </swiper>
                                <input v-else type="text" value="" disabled="true" :placeholder="title ? title : startUp.title" />
                            </navigator>
                        </view>
                    </template>
                    <template v-else>
                        <!-- 返回首页 -->
                        <view class="icon-back-box black" @click="backHome()" v-if="goHome == 1">
                            <view class="iconfont icon-shouye-zhihui size38"></view>
                        </view>
                        <!-- <view class="icon-back-box" @click="backHome()" v-if='goHome == 1'>
							
							<image :src="staticUrl+ '/images/jh_up/icon-back-home.png'" class="icon-back-home"></image>
						</view> -->
                        <!-- 返回 -->
                        <template v-else>
                            <view class="icon-back-box" @click="goBack_" v-if="back != 0">
                                <text class="iconfont icon-xiangzuo" :class="backColor ? 'white' : 'black'"></text>
                            </view>
                        </template>
                        <!-- 搜索 -->
                        <view class="icon-back-box" @click="toUrl('/pages/classify/search')" v-if="search == 1">
                            <text class="iconfont icon-btn_search"></text>
                        </view>
                        <!-- 标题 -->
                        <view class="txt lines">{{ title ? title : startUp.title }}</view>
                    </template>
                    <view class="edit-box" @click="toUrl('/userPage/user/userinfo')" v-if="showSetting == 1">
                        <text class="icon-weibiaoti-_huaban iconfont"></text>
                    </view>

                    <view class="menuButton" :style="{ width: capsuleWidth + 'px' }"></view>
                </view>
            </view>
        </view>
        <!-- # endif -->
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        /**
         * title: 标题
         * back: 是否显示返回键 0不显示 默认显示
         * delta：返回几步  默认1
         * search: 是否显示搜索按钮  1显示  默认不显示
         * isHome: 是否为首页 1首页
         * goHome: 显示返回首页按钮 1显示 默认不显示
         * hideBg: 取消默认背景色 1取消
         * txtColor   false 黑色 true 白色
         * statusHeight 是否默認佔用高度  false 占用 true 不占用
         * **/
        props: ['title', 'back', 'delta', 'search', 'isHome', 'goHome', 'hideBg', 'showSetting', 'statusHeight', 'txtColor', 'backColor'],
        data() {
            return {
                staticUrl: this.staticUrl,

                capsuleWidth: getApp().globalData.capsuleWidth,
                iStatusBarHeight: 0,
                city: '重庆'
            };
        },
        created() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
        },
        methods: {
            goBack_() {
                if (this.delta == 2) {
                    uni.navigateBack({
                        delta: 2
                    });
                } else {
                    uni.navigateBack({
                        delta: 1
                    });
                }
                this.$emit('back');
            }
        },
        computed: {
            ...mapState(['color', 'startUp', 'setSystem', 'navHeight', 'System'])
        }
    };
</script>

<style lang="scss" scoped>
    .transparent {
        background-color: transparent;
    }
    .status-bar-box {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    .fixed1 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3333;
        flex-direction: column;

        height: 100%;
        .status_bar {
            height: var(--status-bar-height);
            width: 100%;
        }
        .title {
            align-items: center;
            color: white;
            .icon-back-box {
                margin-right: -24rpx;
                padding: 0 20rpx 0 24rpx;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                .icon-xiangzuo {
                    font-size: 36rpx;
                    font-weight: normal;
                    top: 2rpx;
                    position: relative;
                }
                .icon-back-home {
                    width: 38rpx;
                    height: 38rpx;
                }
                .icon-btn_search {
                    font-size: 38rpx;
                    color: black;
                }
            }

            .edit-box {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 24rpx;
                .icon-weibiaoti-_huaban {
                    font-size: 36rpx;
                }
            }
            .txt {
                flex: 1;
                font-size: 32rpx;
                font-weight: bold;

                margin-left: 24rpx;
                padding-right: 30rpx;
            }
            .menuButton {
                /* #ifdef MP */
                margin-right: 6px;
                /* #endif */
            }
        }
        .home-status {
            padding: 0 30rpx;
            flex: 1;
            .search-home {
                height: 54rpx;
                flex: 1;
                background-color: rgba(255, 255, 255, 0.7);
                border-radius: 54rpx;
                swiper {
                    height: 100%;
                    width: 100%;
                    text {
                        color: #999999;
                        padding-left: 0;
                        font-size: 26rpx;
                        opacity: 0.6;
                    }
                }
            }
            view {
                color: #ffffff;
                font-size: 28rpx;
            }
            .icon-xiangxia {
                color: #ffffff;
                font-size: 24rpx;
                font-weight: bold;
                margin: 0 20rpx 0 10rpx;
            }
            input {
                text-align: left;
                opacity: 0.8;
            }
            .city {
                max-width: 120rpx;
            }
            .icon-btn_search {
                padding-left: 16rpx;
                margin-right: 10rpx;
                color: #000000;
                opacity: 0.6;
                font-size: 32rpx;
            }
        }
    }
</style>
